<template>
    <div class="wh-100">
        <div class="w-100 h-10 d-flex-align-center bor-base-b">
            <div class="d-flex-around-center mr-auto">
                <div v-for="(item, index) in menu" :key="index" class="ml-16">
                    <div style="cursor: pointer" class="selecct-title" :class="item.id === activeSelect ? 'actice-select' : ''" @click="clikeMenu(item.value, item.id)">{{ item.title }}</div>
                </div>
            </div>
            <div class="d-flex-around-center">
                <div class="ml-8">
                    <Select v-if="ifFormOfOrganization" v-model="modelFormOfOrganization" style="width: 100px">
                        <Option v-for="item in FormOfOrganizationList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </div>
                <div class="ml-8">
                    <Select v-if="ifHoldingTime" v-model="modelHoldingTime" style="width: 100px">
                        <Option v-for="item in HoldingTimeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </div>
                <div class="ml-8">
                    <Select v-if="ifType" v-model="modelType" style="width: 100px">
                        <Option v-for="item in TypeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </div>
                <div class="ml-8">
                    <Select v-if="ifState" v-model="modelState" style="width: 100px">
                        <Option v-for="item in StateList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </div>
                <div class="ml-8">
                    <Input search enter-button="搜索" placeholder="请输入学校名称" @on-search="searchButton" />
                </div>
            </div>
        </div>
        <div class="w-100 h-80 my-auto px-8">
            <div v-for="(item, index) in data" :key="index" class="bor-base-b px-16 d-flex">
                <div class="mr-auto">
                    <div style="cursor: pointer; font-size: 12px" class="select-little-title mt-8 mb-8">{{ item.title }}</div>
                    <div style="color: #c7c6c6; font-size: 10px" class="mb-8">{{ item.registrationTime }}</div>
                    <div style="color: #c7c6c6; font-size: 10px" class="mb-8">{{ item.venue }}</div>
                    <div style="color: #c7c6c6; font-size: 10px" class="mb-8">{{ item.hostSchool }}</div>
                </div>
                <div class="d-flex-around-center">
                    <div style="cursor: pointer; color: #2a8af3; font-size: 10px" @click="buttonIWantToSignUp">我要报名</div>
                    <div style="cursor: pointer; color: #2a8af3; font-size: 10px" class="ml-8 mr-16">进入会场</div>
                </div>
            </div>
        </div>
        <div class="w-100 h-10 bor-base-t d-flex-align-center">
            <Page show-sizer :total="20" show-elevator />
        </div>

        <!--    我要报名对话狂-->
        <Modal v-model="modalIWantToSignUp" title="我要报名" ok-text="发布职位" @on-ok="ok" @on-cancel="cancel">
            <p>{{ modalContent }}</p>
        </Modal>
    </div>
</template>
<script>
export default {
    data() {
        return {
            modalContent: '报名之前，至少发布一个职位，您当前还未发布职位，请点击“发布职位”按钮，发布并审核通过后即可报名。',
            modalIWantToSignUp: false,
            activeSelect: 0,
            data: [
                {
                    id: 0,
                    title: '【专场】2023才聚河“洛”·“阳”帆启航百校千岗暨高校毕业生等青年就业服务专项行动',
                    registrationTime: '报名时间：2023年10月08日 18:00 至 2023年10月27日 18:00',
                    venue: '举办场地：中原校区运动场 郑州市中原中路41号',
                    hostSchool: '举办学校：中原工学院'
                },
                {
                    id: 1,
                    title: '2024届毕业生（软件类专场）就业双选会',
                    registrationTime: '报名时间：2023年10月08日 18:00 至 2023年10月27日 18:00',
                    venue: '举办场地：郑州轻工业大学科学校区办公楼一楼就业服务大厅',
                    hostSchool: '举办学校：郑州轻工业大学'
                },
                {
                    id: 2,
                    title: '2024届毕业生（软件类专场）就业双选会',
                    registrationTime: '报名时间：2023年10月08日 18:00 至 2023年10月27日 18:00',
                    venue: '举办场地：郑州轻工业大学科学校区办公楼一楼就业服务大厅',
                    hostSchool: '举办学校：郑州轻工业大学'
                }
            ],
            menu: [
                { id: 0, value: 'mutualSelection', title: '双选会' },
                { id: 1, value: 'iBookedAMutualSelection', title: '我预约的双选会' },
                { id: 2, value: 'everBeenToAMutualSelection', title: '参加过的双选会' }
            ],
            modelFormOfOrganization: 'allForm',
            FormOfOrganizationList: [
                {
                    value: 'allForm',
                    label: '全部举办形式'
                },
                {
                    value: 'onLine',
                    label: '线上'
                },
                {
                    value: 'offline',
                    label: '线下'
                }
            ],
            modelHoldingTime: 'allTime',
            HoldingTimeList: [
                {
                    value: 'allTime',
                    label: '全部举办时间'
                },
                {
                    value: 'thisMonth',
                    label: '本月'
                },
                {
                    value: 'nextMonth',
                    label: '下月'
                }
            ],
            modelType: 'allType',
            TypeList: [
                {
                    value: 'allType',
                    label: '不限学校类型'
                },
                {
                    value: 'comprehensive',
                    label: '综合类'
                },
                {
                    value: 'financeAndEconomics',
                    label: '财经类'
                }
            ],
            modelState: 'allType',
            StateList: [
                {
                    value: 'allType',
                    label: '全部状态'
                },
                {
                    value: 'audit',
                    label: '审核中'
                },
                {
                    value: 'passTheAudit',
                    label: '审核通过'
                },
                {
                    value: 'failTheAudit',
                    label: '审核不通过'
                }
            ],
            ifFormOfOrganization: true,
            ifHoldingTime: true,
            ifType: true,
            ifState: false
        };
    },
    methods: {
        clikeMenu: function (menuItem, id) {
            this.activeSelect = id;
            if (menuItem === 'mutualSelection') {
                this.ifFormOfOrganization = true;
                this.ifHoldingTime = true;
                this.ifType = true;
                this.ifState = false;
            } else if (menuItem === 'iBookedAMutualSelection') {
                this.ifFormOfOrganization = false;
                this.ifHoldingTime = false;
                this.ifType = false;
                this.ifState = true;
            } else {
                this.ifFormOfOrganization = false;
                this.ifHoldingTime = false;
                this.ifType = false;
                this.ifState = false;
            }
        },
        searchButton: function () {
            debugger;
        },
        buttonIWantToSignUp() {
            this.modalIWantToSignUp = true;
        },
        ok() {
            this.$Message.info('Clicked ok');
        },
        cancel() {
            this.$Message.info('Clicked cancel');
        }
    }
};
</script>
<style scoped>
.selecct-title:hover {
    color: black;
    font-weight: bold;
}
.select-little-title:hover {
    color: #2a8af3;
    text-decoration: underline;
}
.actice-select {
    font-weight: bold;
}
</style>
